<template>
  <el-pagination
    :current-page="props.page"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="props.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
// const props = defineProps({
//   page: {
//     type: Number,
//     required: true,
//     default: 1
//   },
//   size: {
//     type: Number,
//     required: true,
//     default: 5
//   },
//   totalCount: {
//     type: Number,
//     required: true
//   },
//   loadList: {
//     type: Function,
//     default: () => {}
//   }
// })

interface PropsType {
  page:number,
  size:number,
  totalCount:number,
  loadList:()=>void // ...args:any   a:string
}
// const props = defineProps<PropsType>()
const props = withDefaults(defineProps<PropsType>(), {
  page: 1,
  size: 5,
  loadList: () => {}
})

// const emit = defineEmits(['update:page', 'update:size'])
interface EmitsType{
  (e:'update:page', page:number):void
  (e:'update:size', size:number):void
}
const emit = defineEmits<EmitsType>()

const handleSizeChange = (size:number) => {
  emit('update:size', size)
  emit('update:page', 1)
  props.loadList()
}

const handleCurrentChange = (page:number) => {
  emit('update:page', page)
  props.loadList()
}
</script>

<style lang="scss" scoped>
</style>
